<script setup>

import {ref} from "vue";

const noAgreeShow = ref(false)
const noAgreeReason = ref('')
const noAgreeClose = () => {
  noAgreeShow.value = false
}
const noAgreeConfirm = () => {
  noAgreeShow.value = false
}
</script>

<template>
  <view class="container">
    <up-popup :show="noAgreeShow" mode="center" round="100rpx" @close="close" @open="open">
      <view class="popup-container">
        <up-text bold margin="0 0 30rpx 0" text="不同意理由"></up-text>
        <up-textarea v-model="noAgreeReason" border="none" placeholder="请输入不同意理由..."
                     placeholder-style="font-size:24rpx;"></up-textarea>
        <view class="popup-btns">
          <view class="btn">
            <up-button text="确定" type="primary" @click="noAgreeConfirm"></up-button>
          </view>
          <view class="btn">
            <up-button text="取消" type="warning" @click="noAgreeClose"></up-button>
          </view>
        </view>
      </view>
    </up-popup>
    <view class="note">
      <view class="title">
        <up-text bold icon-style="margin-right: 8rpx;" prefix-icon="error-circle" size="24rpx"
                 text="温馨提示"></up-text>
        <view class="content">
          <up-text
              color="#808080"
              margin="22rpx 0"
              size="24rpx"
              text="合并请求需创建人同意后，才能合并成功。显示新的标签称。同学校/学院角色所创建的合并请求，无需同意。"></up-text>
        </view>
      </view>
    </view>
    <view class="merge-tags">
      <up-text bold size="28rpx" text="需合并标签"></up-text>
      <view class="list">
        <view class="item">小众艺术</view>
        <view class="item">炸鸡少女</view>
      </view>
    </view>
    <view class="tag-show-name">
      <up-text bold size="28rpx" text="标签显示名"></up-text>
      <view class="text-box">
        <up-text margin="16rpx" size="28rpx" text="小众的炸鸡少女"></up-text>
      </view>
    </view>
    <view class="merge-reason">
      <view class="title">
        <up-text bold icon-style="color:red;" suffix-icon="*" text="合并理由"></up-text>
      </view>
      <view class="text-box">
        <up-text
            size="28rpx"
            text="老师您好，经学工部商议发现所创建的标签存在类似的情况，请使用统一的标签名称便于学生工作管理。"></up-text>
      </view>
    </view>
    <view class="confirm">
      <view class="title">
        <up-text bold margin="32rpx 0" size="28rpx" text="确认流程"></up-text>
      </view>
      <view class="main">
        <view class="steps">
          <view class="dot"></view>
          <view class="line"></view>
          <view class="dot active"></view>
        </view>
        <view class="list">
          <view class="item">
            <view class="avatar">
              <up-avatar :text="`张`" font-size="40rpx" randomBgColor size="70rpx"></up-avatar>
            </view>
            <view class="content">
              <up-text bold color="#171717" size="28rpx" text="发起人(学生)"></up-text>
              <up-text :suffix-icon="`已发起`" :text="`张婉悠`" bold icon-style="margin-left:80rpx"
                       margin="20rpx 0"></up-text>
            </view>
          </view>
          <view class="item">
            <view class="avatar">
              <up-avatar :text="`王`" font-size="40rpx" randomBgColor size="70rpx"></up-avatar>
            </view>
            <view class="content">
              <up-text bold color="#171717" size="28rpx" text="审批人(导师)"></up-text>
              <up-text :suffix-icon="`等待结果`" :text="`王小明`" bold icon-style="margin-left:80rpx;color:#FF8125;"
                       margin="20rpx 0"></up-text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="btns">
      <view class="btn">
        <up-button custom-style="background:#2e6bf8;" shape="circle" text="同意" type="primary"></up-button>
      </view>
      <view class="btn">
        <up-button custom-style="back" plain shape="circle" text="不同意" type="primary"
                   @click="noAgreeShow=true"></up-button>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.container {
  padding: 30rpx;
  background-color: #F3F5F9;

  .popup-container {
    padding: 30rpx;
    height: 388rpx;
    width: 686rpx;
    background-color: #F3F5F9;
    border-radius: 24rpx;
    filter: blur(0);

    .popup-btns {
      padding: 0 50rpx;
      display: flex;
      justify-content: space-between;
      margin-top: 20rpx;
    }
  }


  .note {
    width: 686rpx;
    height: 184rpx;
    background: #FFFFFF;
    box-shadow: 0 6rpx 12rpx 0 #dae4f080;
    border-radius: 24rpx;
    filter: blur(0);
    padding: 32rpx 18rpx;
  }

  .merge-tags {
    margin-top: 32rpx;

    .list {
      margin-top: 20rpx;
      display: flex;

      .item {
        width: 200rpx;
        height: 72rpx;
        line-height: 73rpx;
        background: #8798C0;
        border-radius: 36rpx;
        color: #fff;
        text-align: center;
        margin: 22rpx;
      }
    }
  }

  .tag-show-name {
    margin-top: 32rpx;

    .text-box {
      width: 686rpx;
      height: 80rpx;
      background: #FFFFFF;
      border-radius: 15rpx;
      line-height: 80rpx;
      padding-left: 16rpx;
    }
  }

  .merge-reason {
    margin-top: 32rpx;

    .title {
      margin-bottom: 20rpx;
    }

    .text-box {
      width: 686rpx;
      height: 144rpx;
      background: #FFFFFF;
      padding: 24rpx 16rpx;
      border-radius: 15rpx;
    }
  }

  .confirm {
    margin-top: 32rpx;

    .main {
      display: flex;
      background-color: #fff;
      width: 686rpx;
      height: 400rpx;
      border-radius: 16rpx;
      padding: 32rpx;

      .steps {
        width: 50rpx;
        margin: 32rpx 0 0 0;
        height: 200rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .dot {
          width: 24rpx;
          height: 24rpx;
          border-radius: 50%;
          background-color: #ccc;
        }

        .active {
          background-color: #8ab1f5;
          position: relative;;

          &::after {
            content: '';
            width: 10rpx;
            height: 10rpx;
            background-color: #046cf7;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }

        .line {
          margin-left: 9rpx;
          width: 4rpx;
          height: 180rpx;
          background-color: #ccc;
        }
      }

      .list {
        .item {
          display: flex;
          padding: 32rpx;
          width: 552rpx;
          height: 152rpx;
          background: #FFFFFF;
          box-shadow: 0 2rpx 12rpx 4rpx #7c829224;
          border-radius: 16rpx;
          margin: 10rpx 0;

          .avatar {
            margin: 0 32rpx;
          }
        }

      }
    }
  }

  .btns {
    height: 80rpx;
    display: flex;
    justify-content: space-between;

    .btn {
      margin-top: 54rpx;
      width: 328rpx;
      height: 80rpx;
    }
  }
}
</style>